import {Component, OnInit} from '@angular/core';

interface Data {
  id?: string;
  name?: string;
  subitems?: Data[]
}

@Component({
  selector: 'app-text1',
  templateUrl: './text1.component.html',
  styleUrls: ['./text1.component.css']
})
export class Text1Component implements OnInit {


  items: Data[] = [];

  item: Data = {};

  selectedsubitems: Set<Data> = new Set();

  toggleItem(item) {
    if (this.item.id === item.id) {
      this.item = {}
    } else {
      this.item = item;
    }
  }

  selectSubitem(subitem) {
    if(this.selectedsubitems.has(subitem)){
      this.selectedsubitems.delete(subitem);
    } else {
      this.selectedsubitems.add(subitem);
    }
  }

  ngOnInit() {
    this.items = [{
      "id": "1",
      "name": "水果",
      "subitems": [
        {"id": "11", "name": "苹果"},
        {"id": "12", "name": "香蕉"},
        {"id": "13", "name": "梨"}
      ]
    }, {
      "id": "2",
      "name": "蔬菜",
      "subitems": [
        {"id": "21", "name": "番茄"},
        {"id": "22", "name": "土豆"},
        {"id": "23", "name": "茄子"}
      ]
    }, {
      "id": "3",
      "name": "农作物",
      "subitems": [
        {"id": "31", "name": "小麦"},
        {"id": "32", "name": "小米"},
        {"id": "33", "name": "玉米"}
      ]
    }];
  }

}
